<template>
    <div id="allBody">
        <el-container>
            <el-header>
                <nav>
                    <h2 class="nav-left">保险后台管理系统</h2>
                    <div class="nav-right">
                        <div class="log" @click="person">
                            <img src="" alt="" />
                        </div>
                        <span>XXX</span>
                        <router-link to="/login"  @click="exit">退出</router-link>
                    </div>
                </nav>
            </el-header>
            <el-container>
                <el-aside width="260px">
                    <SideBar></SideBar>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import SideBar from "../common/SideBar.vue";
export default {
    components: {
         SideBar,
    },
    methods: {
        person() {
            this.$router.push("/System/SalesmansPersonally");
        },
        exit(){
            localStorage.removeItem("token");
            alert("退出成功");
            //  this.$router.push("/login");
        }
    },
};
</script>

<style  lang="scss">
#allBody {
    > .el-container {
        min-height: 100vh;
    }
    
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .el-header {
        background-color: #b3c0d1;
        nav {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            color: white;
            .nav-left {
                height: 100%;
                margin-left: 20px;
                display: flex;
                // align-items: center;
                line-height:20px;
                color: white;
            }
            .nav-right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 160px;
                color: white;
                > * {
                    margin-left: 10px;
                }
                .log {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: #fff;
                }
                a {
                    color: white;
                }
            }
        }
    }

    .el-aside {
        background-color: #d3dce6;
        text-align: center;
    }

    .el-main {
        background-color: #e9eef3;
        // text-align: center;
    }
}

body > .el-container {
    margin-bottom: 40px;
}
</style>